<div ng-form="stageForm"
  form-checker="stage"
  form-id="stage.slug"
  form-stage="stage">
  <span ng-bind="stageForms[$index].$valid"></span>
  <div class="instructions text-center">
    <h2>{{ stage.name }} {{ texts.stageOverview }}</h2>
  </div>
  <hr/>
  <div class="row">
    <div class="stage-details-navigation columns large-3 medium-4">
      <div
        class="stage-overview stage-action-toggle"
        ng-click="viewingStageOverview = true"
        ng-class="{'selected': viewingStageOverview, 'completed': stage.edited}">
        <span class="fa fa-check"></span> Stage Overview
      </div>
      <div actions-control
        stage="stage"
        texts="texts"
        viewing-stage-overview="viewingStageOverview"></div>
    </div>
    <div class="columns large-9">
      <div guide-stage-overview
        texts="texts"
        stage="stage"
        ng-show="viewingStageOverview">
      </div>
      <div guides-actions
        ng-hide="viewingStageOverview"
        stage="stage"
        texts="texts">
      </div>
    </div>
  </div>
</div><!-- ng-form -->

<div class="button-wrapper row">
  <div class="columns small-12">
    <div stage-buttons
      hint="'Tell us a little more about this stage before continuing.'"
      stage="stage"
      next-stage="nextStage"
      texts="texts"
      >
    </div>
  </div>
</div>
